<template>
    <el-dialog
            :visible.sync="personalDataPreVisible"
            :close-on-click-modal="false"
            width="40%"
            style="overflow: hidden ;"
            v-dialogDrag
            id="personalDataPreDialog">
        <el-main style=" min-height: 300px;overflow: hidden">
            <el-table
                    :data="infoData"
                    height="250"
                    top="7%"
                    style="overflow:auto;height:400px;">
                <el-table-column
                        v-for="item in headers"
                        :property="item"
                        :label="item"
                        :key="item">
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: center">
            <el-pagination
                    :page-size="pageSize"
                    :total="personalDataCount"
                    :current-page="personalDataCurrentPage"
                    layout="prev, pager, next"
                    @current-change="personalPageChange"
                    style="margin-top: 10px;">
            </el-pagination>
        </el-footer>
    </el-dialog>
</template>
<script>
    export default {
        name: "personalDataPreDialog",
        data() {
            return {
                personalDataPreVisible: false,
                url: '',
                infoData: [],
                headers: [],
                personalDataCount: 1,
                personalDataCurrentPage: 1,
                pageSize: 8,
            }
        },
        // computed: {
        //     colnames() {//获取列名
        //         if (this.infoData == null || this.infoData.length === 0) {
        //             return null;
        //         } else {
        //             for (let col of Object.keys(this.infoData[0])) {
        //                 if (col.toLowerCase().indexOf("pk") !== -1 && col.toLowerCase().indexOf("id") !== -1) {
        //                     delete this.infoData[0][col];
        //                 }
        //             }
        //         }
        //         let col = Object.keys(this.infoData[0]);
        //         return col;
        //     }
        // },
        methods: {
            getModelInfo() {
                let that = this;
                this.infoData = [];
                this.$axios.post(that.url + "?pageSize=" + that.pageSize + "&pageNo=" + that.personalDataCurrentPage).then(res => {
                    if (res.code == 200) {
                        if (res.body.totalSize == -1) {
                            that.$message({
                                type: 'warning',
                                message:
                                    '数据集为空！'
                            })
                        } else {
                            that.headers = [];
                            that.infoData = [];
                            that.personalDataCount = res.body.totalSize;
                            let tabledata = [];
                            for (let i = 0; i < res.body.records.length; i++) {
                               delete res.body.records[i].att.GEOM;
                                let data = res.body.records[i].att;
                                tabledata.push(data);
                            }
                            that.infoData = tabledata;
                            for (let key in that.infoData[0]) {
                                that.headers.push(key);
                            }
                        }
                    } else {

                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message:
                            '数据集预览失败！'
                    })
                })
            },
            personalPageChange(currentPage) {
                this.personalDataCurrentPage = currentPage;
                this.getModelInfo();
            },
        },
        created() {
            let that = this;
            this.$Bus.$on('personalDatapreview', res => {
                that.url = res.url;
                that.personalDataPreVisible = res.visible;
                that.getModelInfo();
            })
        }
    }
</script>

<style>

</style>